<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<div class="row">
<div class="col-sm-4">
	<div class="ibox float-e-margins animated bounceInLeft">
		<div class="ibox-title col-sm-12" style="border-bottom: none; background: #fff;">
			<div class="col-sm-10" style="height:100%;vertical-align: middle;">角色管理</div>
			<div class="col-sm-2" style="height:100%;text-align: center;"><button title="增加角色" class="btn btn-success btn-sm dim" type="button"><i class="fa fa-plus"></i></button></div>
		</div>
		<div class="ibox-content" style="border-top: none;">
			<table class="table table-condensed table-hover table-bordered">
				<tr>
					<th>ID</th>
					<th>角色名</th>
					<th>操作</th>
				</tr>
				<c:forEach  items="${role}" var="role">
					<tr>
						<td>${role.id}</td>
						<td id="role${role.id}">${role.role}</td>
						<td><a data="${role.id}" onclick="edit(this)" class="btn btn-sm btn-success btn-rounded col-sm-6">编辑</a><a data="${role.id}" class="btn btn-sm btn-danger btn-rounded col-sm-6">删除</a></td>
						
					</tr>
				</c:forEach>
			</table>
		</div>
	</div>
	</div>
	<div class="col-sm-8">
		<div class="ibox float-e-margins animated bounceInRight">
			<div class="ibox-title" style="border-bottom: none; background: #fff;">
				<h5>节点管理</h5>
			</div>
			<div class="ibox-content" style="border-top: none;">
				<table class="table table-condensed table-hover table-bordered">
					<tr>
						<th>ID</th>
						<th>菜单图标</th>
						<th>节点名</th>
						<th>路径</th>
						<th>操作</th>
					</tr>
					<tr>
						<td>1</td>
						<td>1</td>
						<td>1</td>
						<td>1</td>
						<td><a class="btn btn-sm btn-danger btn-rounded"
							href="buttons.html#">删除</a></td>
					</tr>
					<tr>
						<td>1</td>
						<td>1</td>
						<td>1</td>
						<td>1</td>
						<td><a class="btn btn-sm btn-danger btn-rounded"
							href="buttons.html#">删除</a></td>
					</tr>
				</table>
			</div>
		</div>
	</div>
</div>
<script type="text/javascript">
function edit(obj){
	 var id = $(obj).attr('data');
	 var text = $('#role'+id).text();
	 alert(text);
	 $('#role'+id).text('');
	 $('#role'+id).innerHTML+="<input data='"+id+"'style='width:50px' type='text' value='"+text+"'></input>";
}
</script>
<!-- Bootstrap table -->
<script
	src="<%=basePath%>js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
<script
	src="<%=basePath%>js/plugins/bootstrap-table/bootstrap-table-mobile.min.js"></script>
<script
	src="<%=basePath%>js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>

<!-- Peity -->
<script src="<%=basePath%>js/demo/bootstrap-table-demo.js"></script>


